<template>
  <div class="date-type">
    <div :class="currentDate == '1' && 'select'" @click="changeDate('1')">
      日
    </div>
    <div :class="currentDate == '2' && 'select'" @click="changeDate('2')">
      周
    </div>
    <div :class="currentDate == '3' && 'select'" @click="changeDate('3')">
      月
    </div>
    <div :class="currentDate == '4' && 'select'" @click="changeDate('4')">
      总计
    </div>
  </div>
</template>

<script setup>
import moment from "moment";

const props = defineProps({
  selectDate: {
    type: String,
    default: "1",
  },
  selectTime: {
    type: Array,
    default: [
      moment(new Date()).startOf("day").format("YYYY-MM-DD HH:mm:ss"),
      moment(new Date()).endOf("day").format("YYYY-MM-DD HH:mm:ss"),
    ],
  },
});
const emits = defineEmits(["update:selectDate", "update:selectTime", "change"]);
const currentDate = ref("1");
const currentTime = ref("1");
const dateObj = {
  1: "day",
  2: "week",
  3: "month",
};
const updateDateMsg = (val) => {
  currentDate.value = val;
  const dateType = dateObj[currentDate.value];
  console.log("dateType", dateType);
  currentTime.value = [
    moment(new Date()).startOf(dateType).format("YYYY-MM-DD HH:mm:ss"),
    moment(new Date()).endOf(dateType).format("YYYY-MM-DD HH:mm:ss"),
  ];
};
watch(
  () => props.selectDate,
  () => {
    updateDateMsg(props.selectDate);
    console.log("  currentTime.value", currentTime.value);
  },
  {
    immediate: true,
  }
);
const changeDate = (val) => {
  updateDateMsg(val);
  emits("update:selectDate", val);
  emits("update:selectTime", currentTime.value);
  emits("change",val);
};
</script>

<style lang="less" scoped>
.date-type {
  position: absolute;
  //   top: 0;
  //   left: 0;
  font-size: 28px;
  display: flex;
  z-index: 9;
  > div {
    min-width: 55px;
    height: 65px;
    padding: 0 10px;
    text-align: center;
    line-height: 65px;
    border: 1px solid #000;
    border-left: none;
    &:first-child {
      border-left: 1px solid #000;
    }
    &.select {
      background: #000;
      color: #fff;
    }
  }
}
</style>
